<template>
    <s-box title="动态信息来源分布" :span="6" ref="loading">
      <div class="trend-time"  slot="header">
        <Select class="select-top" v-model="category" @on-change="_initChart">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
        <div class="chart-box">
            <div class="chart-wrap" ref="chart"></div>
        </div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
            category:'all',
            cityList: [
              {
                value: 'all',
                label: '综合'
              },
              {
                value: 'news',
                label: '新闻动态'
              },
              {
                value: 'paper',
                label: '论文'
              },
              {
                value: 'patent',
                label: '专利'
              },
            ],
            xData:[],
            yData:[],
            data2
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
        delegate.$off('s-resize',this._initChart)
        delegate.$off('s-search',this._initSearch)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._initSearch)
            delegate.$on('s-resize',this._initChart)
        },
        _initSearch(obj){

        },
        _initChart(bool) {
            this.$refs.loading.show();
            // if(!bool) return;
            this._getSourceDatalist();
        },
        _getSourceDatalist(){
            if(!this.navCurrentId) return;
            this.api({
                    url: "newtechanalyse/technologySourceDistribution",
                    method: "post",
                    data:`topicId=${this.navCurrentId}${this.category == 'all' ? '': '&category='+this.category }`
            }).then(data => {
                this.$refs.loading.hide();
                this.xData = [];
                data.forEach((item,index) =>{
                    this.xData.push({name:item.sourcename,value:item.num});
                })
                this.chart();
            }).catch((error) =>{ this.$refs.loading.hide()})
        },
        chart(){
            this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.chart);
                let xData = this.xData;
                myChart.setOption({
                color:['#8d7fec','#5085f2', '#e75fc3', '#f87be2', '#f2719a','#fca4bb', '#f59a8f', '#fdb301','#57e7ec', '#cf9ef1', '#57e7ec'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                  type:"scroll",
                  orient: 'vertical',
                  left:'70%',
                  align:'left',
                  top:'middle',
                  textStyle: {
                    color:'#fff'
                  },
                  height:250
                },
                series: [
                        {
                            name:'最大值',
                            data: xData,
                            type:'pie',
                            radius : '50%',
                            center: ['30%', '50%'],
                            roseType: false,
                            label: {
                                normal: {
                                    textStyle: {
                                        color: '#47e1ff'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: '#47e1ff'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        },
                    ]
                });
            });
        }

    },
}
</script>
<style lang="scss" scoped>
  .chart-box{
      position: relative;
      padding-top: 50.9%;
  }
  .chart-wrap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
</style>
